<template>
	<view>
		<!-- 月份 -->
		<view class="month">
			<image src="/static/images/calendar-jiantou.png" mode="widthFix" @click="lastMonth"></image>
			<view>{{year}}. <text v-if="parseInt(month)<10">{{'0'+parseInt(month)}}</text> <text v-else>{{month}}</text>
			</view>
			<image src="/static/images/calendar-jiantou.png" mode="widthFix" @click="nextMonth"></image>
		</view>
		<!-- 周 -->
		<view class="week">
			<view :class="'i '+[index==0|| index==week.length-1?'i1':'']" v-for="(item,index) in week" :key="index">
				{{item}}
			</view>
		</view>
		<!-- 天 -->
		<view class="day">
			<view class="i" :class="(index+1)%7==1||(index+1)%7==0?'i1s':''" v-for="(item,index) in dayList"
				:key="index">
				<!-- {{item}} -->
				<!-- {{nowDate}} -->
				<!-- {{year+'-'+month+'-'+item}} -->
				<!-- <view class="daybox"
					:class="(year+'-'+month+'-'+item)==selectDate?'selectText':(year+'-'+month+'-'+item)==nowDate?'zdtext':''"
					@click="tapDay(item)">
					{{(year+'-'+month+'-'+item)==nowDate?'今':item}}
				</view> -->
				<view class="daybox" :class="item.type==1?'selectText':item.type==2?'noDaka':''" @click="tapDay(item)">
					<text v-if="item.text">
						{{(year+'-'+month+'-'+item.text)==nowDate?'今':item.text}}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				year: '',
				month: '',
				day: '',
				week: ['日', '一', '二', '三', '四', '五', '六'],
				dayList: [],
				nowDate: '',
				selectDate: ''
			}
		},
		watch: {
			month: function() {
				this.setDay();
			}
		},
		created() {
			this.setNow();
		},
		methods: {
			//选择日期
			tapDay(item) {
				return;
				this.selectDate = this.year + '-' + this.month + '-' + item
				// console.log(this.selectDate);
				this.$emit('click', this.selectDate);
			},
			/**
			 * 设置当前年月日
			 */
			setNow() {
				let date = new Date();
				this.year = date.getFullYear();
				this.month = date.getMonth() + 1;
				if (this.month < 10) {
					this.month = '0' + this.month
				}
				this.day = date.getDate();
				if (this.day < 10) {
					this.day = '0' + this.day
				}
				this.nowDate = this.year + '-' + this.month + '-' + this.day
				this.selectDate = this.year + '-' + this.month + '-' + this.day
				// console.log(this.selectDate);
			},
			/**
			 * 下一个月
			 */
			nextMonth() {

				if (parseInt(this.month) + 1 > 12) {
					// this.year = this.year + 1;
					// this.month = 1;
				} else {
					this.month = parseInt(this.month) + 1;
				}
				this.$emit('monthOther', this.month);
			},
			/**
			 * 上一个月
			 */
			lastMonth() {
				if (this.month - 1 < 1) {
					// this.year = this.year - 1;
					// this.month = 12;
				} else {
					this.month = parseInt(this.month) - 1;
				}
				this.$emit('monthOther', this.month);
			},
			/**
			 * 设置日历天
			 */
			setDay() {
				let date = new Date(this.year, this.month - 1, 1);
				let date1 = new Date(this.year, this.month, 0);
				//获取当前月第一天是周几，0等于周日
				let oneDay = date.getDay();
				//获取当前月天数
				let monthDay = date1.getDate();
				let dayList = [];
				for (var i = 0; i < oneDay; i++) {
					let day = i + 1;
					if (day < 10) {
						day = '0' + day
					}
					dayList.push('')
				}
				for (var i = 0; i < monthDay; i++) {
					let num = i + 1;
					if (num < 10) {
						num = '0' + num
					}
					dayList.push({
						type: false,
						text: num
					})
				}
				this.dayList = dayList;
			},
			xuanran(list) {
				// parseInt(month)<10">{{'0'+parseInt(month
				let month = parseInt(this.month) < 10 ? '0' + parseInt(this.month) : this.month
				list.calendarDtoList.forEach(e => {
					let index = this.dayList.findIndex(sitem => this.year + '-' + month + '-' + sitem.text ==
						e.timeName);
					if (!e.status) {
						this.dayList[index].type = 1
					} else if (e.status == 1) {
						this.dayList[index].type = 2
					}
				})
			},

		}
	}
</script>

<style>
	.month {
		display: flex;
		margin-top: 40rpx;
		justify-content: space-between;
		align-items: center;
		height: 28rpx;
		padding: 0 70rpx;
	}

	.month image {
		width: 26rpx;
	}

	.month image:nth-child(1) {
		transform: rotate(180deg);
	}

	.month view {
		height: 28rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 28rpx;
		letter-spacing: 2rpx;
	}

	.week {
		display: flex;
		margin-top: 60rpx;
		text-align: center;
	}

	.week .i {
		width: 14.28%;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		/* font-weight: 600; */
		color: #666666;
		line-height: 40rpx;
	}


	.week .i1 {
		color: #666666;
	}

	.day {
		display: flex;
		flex-wrap: wrap;
	}

	.daybox {
		/* border: 1rpx solid red; */
		display: inline-block;
		width: 45rpx;
		height: 45rpx;
		line-height: 45rpx;
		border-radius: 50%;
		font-size: 28rpx;
	}

	.day .i {
		width: 14.28%;
		text-align: center;
		margin-top: 25rpx;
		/* color: #333333; */
		font-size: 27rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		/* font-weight: 600; */
		/* line-height: 38rpx; */
		letter-spacing: 2rpx;
	}

	.i1s {
		color: #999;
	}

	.selectText {
		background-color: #00A29A;
		color: #FFFFFF;
	}

	.noDaka {
		/* background-color: #ff0000; */
		color: #ff0000;
	}

	.zdtext {
		color: #FF9525;
	}
</style>
